$hero-section-height: 550px;
$hero-section-max-width: 820px;
$hero-left-section-width: 300px;
$hero-left-section-right-padding: 40px;


.demo-content {
  padding: 64px 16px 0 16px;
}

.component-catalog-panel {
  margin-top: 24px;
  padding-bottom: 24px;

  &.component-catalog-panel--v2-hero &__header {
    flex: 1 1 40%;
  }

  &__header {
    display: flex;
    flex-flow: column wrap;
    height: $hero-section-height;
    align-items: flex-start;

    &.component-catalog-panel--v2-hero {
      flex: 1 1 auto;
    }
  }

  &__hero-area {
    height: 100%;
    margin-bottom: 48px;
  }

  &__header-elements {
    max-width: $hero-left-section-width;
    padding-right: $hero-left-section-right-padding;
  }

  .hero {
    order: 4;
    flex: 1 1 100%;
    // This calculation is the parent width minus the first column max width element (the description).
    // This gives the most responsive layout.
    width: calc(100% - (#{$hero-left-section-width} + #{$hero-left-section-right-padding}));
    height: $hero-section-height;
    padding: 24px;
    box-sizing: border-box;
  }

  .hero-options {
    flex: 1 1 auto;
  }

  .hero-component {
    order: 4;
    flex: 1 1 100%;
    height: $hero-section-height;
    // This calculation is the parent width minus the first column max width element (the description).
    // This gives the most responsive layout.
    width: calc(100% - (#{$hero-left-section-width} + #{$hero-left-section-right-padding}));
    margin-top: 32px;
  }
}

@media screen and (max-width: $hero-section-max-width) {
  .component-catalog-panel {
    &.component-catalog-panel--v2-hero .hero-component {
      order: 0;
      flex: 1 1 auto;
      height: auto;
    }

    &__header-elements {
      max-width: none;
    }

    &__header {
      flex-flow: column nowrap;
      height: auto;
    }

    .hero-options {
      max-height: none;
    }

    .hero,
    .hero-component {
      width: 100%;
    }


  }

}

.hero-select {
  width: 250px;
}

// Hero styles for the component/iframe/ routes for m.io experiment.
.hero-iframe {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: center;
  background-color: rgba(0, 0, 0, .05);
  flex: 1 1 100%;
  height: 408px;
  padding: 24px;
  box-sizing: border-box;
}

.component-catalog-resources {
  margin: 0;
  padding: 0;
  list-style: none;
}
